<template>
	<view>
		<skeleton v-if="skeleton"></skeleton>
		<view
			v-else
			class="pro-item"
			:style="{
				width: direction == 'row' ? '100%' : width,
				marginLeft: ml,
				marginRight: mr,
				marginBottom: mt
			}"
			:class="[{ small: size == 'small', mini: size == 'mini', 'flex pt24 pb24': direction == 'row' }]"
		>
			<view
				class="imgbox"
				:style="{
					height: width,
					width: width
				}"
				@tap="handleimg"
			>
				<!-- <image v-if="proinfo.img_url && proinfo.img_url.length > 0" :src="`${proinfo.img_url[0]}?imageView2/0/w/330`" mode=""></image> -->
				<u-lazy-load
					:height="width"
					v-if="proinfo.img_url && proinfo.img_url.length > 0"
					:index="index"
					:image="`${proinfo.img_url[0]}?imageView2/0/w/330`"
					imgMode="aspectFill"
				></u-lazy-load>
				<view class="video" v-if="proinfo.video_url && proinfo.video_url != 'null'"><image :src="`${assetsPath}/video.png`" mode="widthFix"></image></view>
				<view class="mark flex justify-center align-center" v-if="proinfo.stock == 0">- 已售罄 -</view>
				<template v-if="proinfo.shootvideo_id">
					<!-- 实拍提示 -->
					<view class="viodetip flex justify-center align-center">
						<image src="/static/241226/video.png" mode="widthFix"></image>
						<text>视频验货</text>
					</view>
				</template>
			</view>
			<view class="pro-item-bd u-flex u-flex-column" :class="{ 'flex-sub ml15 nopadding': direction == 'row' }">
				<view class="flex justify-between align-center">
					<view class="name flex align-center" @tap="details" :class="{ 'text-cut': !waterfall }">
						<template v-if="proinfo.is_zhijian_tuijian == 1">
							<view
								class="tjtag"
								:style="{
									color: proinfo.zhijian_tuijian_label.font_color,
									background: proinfo.zhijian_tuijian_label.bg_color,
									borderColor: proinfo.zhijian_tuijian_label.bk_color
								}"
								v-if="proinfo.zhijian_tuijian_label.type == 1"
							>
								{{ waterfall ? '荐' : proinfo.zhijian_tuijian_label.text }}
							</view>
							<image v-else class="tjtagimg" :src="proinfo.zhijian_tuijian_label.img_url" alt="" mode="heightFix" />
						</template>
						<span class="limittag" v-if="proinfo.is_shipping == 1">包邮</span>
						{{ proinfo.name }}
						<text class="u-primary">{{ proinfo.product_dengji_ || '' }}</text>
					</view>
					<view v-if="direction == 'row'" class="guige">{{ proinfo.product_guige_ || '' }}</view>
				</view>
				<view class="subname flex-sub" v-if="waterfall">{{ proinfo.title || '' }}</view>
				<template v-else>
					<view class="subname mt10" @tap.stop="navToshop">
						<span
							class="goodstate"
							v-if="proinfo.is_good == 1"
							:style="{
								color: proinfo.supplier_good_lable.font_color,
								background: proinfo.supplier_good_lable.bg_color
							}"
						>
							{{ proinfo.supplier_good_lable.text }}
						</span>
						<text>{{ proinfo.supplier_name || '' }}</text>
						<text class="ml10" style="color: #333">进店></text>
					</view>
					<view class="flex-sub"></view>
				</template>
				<view class="tags u-flex-y-center mt10" v-if="!waterfall || (waterfall && proinfo.lable.length > 0)">
					<view class="tag" v-if="proinfo.product_lable == 1 && proinfo.product_lable_name">
						<u-tag
							size="mini"
							:color="proinfo.product_lable_color"
							:bgColor="proinfo.product_lable_bg_color"
							:borderColor="proinfo.product_lable_bg_color"
							:text="proinfo.product_lable_name"
						></u-tag>
					</view>
					<image v-if="proinfo.is_yanxuan == 1" class="tag" src="/static/tag.png" mode="heightFix"></image>
					<image v-if="proinfo.is_seckill == 1" class="tag" src="/static/tag2.png" mode="heightFix"></image>
					<image class="tag" :src="tag.img_url" mode="heightFix" v-for="(tag, index) in proinfo.lable"></image>
				</view>
				<view class="subname mt10" v-if="!waterfall">
					<text>已售：{{ proinfo.total_sales }}</text>
					<text class="ml10">剩余：{{ proinfo.stock }}</text>
				</view>
				<view class="pro-item-ft u-flex justify-between mt10 align-end" :class="{ mt10: waterfall }">
					<view
						:class="[
							{
								'flex align-end': direction == 'row'
							}
						]"
					>
						<view class="price flex align-end">
							<text class="unit" v-if="direction != 'row'">¥</text>
							<text>{{ proinfo.price }}</text>
							<text class="symbols">/扎</text>
						</view>
						<!-- <view
							v-if="proinfo.is_seckill == 1"
							class="oldprice flex align-end "
							style="text-decoration: line-through;"
							:class="[direction == 'row' ? 'ml8' : 'mt10']"
						>
							<text class="unit">¥</text>
							<text style="line-height: 0.9;">{{ proinfo.seckill_price }}</text>
						</view> -->
						<view v-if="proinfo.is_green_price == 1" class="oldprice flex align-end" :class="[direction == 'row' ? 'ml8' : 'mt10']">
							<text class="unit">¥</text>
							<text style="line-height: 0.9">{{ proinfo.green_price }}</text>
							<image class="vip" :src="`${assetsPath}/vip.png`" mode="widthFix"></image>
						</view>
					</view>
					<view
						:class="{
							'fixed-right': direction == 'row'
						}"
					>
						<view @tap="addCart" v-if="proinfo.cart_num == 0 || direction == 'column'" class="cart">
							<u-badge :value="proinfo.cart_num"></u-badge>
							<image :src="`${assetsPath}/cart3.png`" mode="widthFix"></image>
						</view>
						<numberbox v-else v-model="proinfo.cart_num || 0" class="num" :max="proinfo.stock" @change="({ value }) => inputCar(value)"></numberbox>
					</view>
				</view>
			</view>
		</view>
		<u-line v-if="direction == 'row'" color="rgba(229, 229, 229, 0.5)"></u-line>
	</view>
</template>

<script>
import numberbox from './numberbox';
import { mapState, mapMutations, mapActions } from 'vuex';
import skeleton from './skeleton';
export default {
	name: 'pro-item',
	data() {
		return {};
	},
	props: {
		skeleton: {
			type: Boolean,
			default: false
		},
		width: {
			type: [String],
			default: uni.upx2px(330) + 'px'
		},
		size: {
			type: String,
			default: 'default'
		},
		ml: {
			type: [String, Number],
			default: 0
		},
		mr: {
			type: [String, Number],
			default: 0
		},
		mt: {
			type: [String, Number],
			default: 0
		},
		direction: {
			type: String,
			default: 'column'
		},
		proinfo: {
			type: Object,
			default: () => {}
		},
		//是否瀑布流布局
		waterfall: {
			type: Boolean,
			default: false
		},
		index: {
			type: [String, Number],
			default: 0
		}
	},
	components: { numberbox, skeleton },
	methods: {
		...mapActions(['getCarCount']),
		handleimg() {
			if (this.proinfo.shootvideo_id) {
				this.$emit('showShootVideo', this.proinfo);
			} else {
				this.details();
			}
		},
		details() {
			this.$Router.push({
				path: '/pages/goodsdetails/goodsdetails?id=' + this.proinfo.id
			});
		},
		navToshop() {
			this.$Router.push({
				path: '/pages/shop/shop?id=' + this.proinfo.sid
			});
		},
		addCart() {
			if (this.direction == 'row') {
				this.inputCar(1);
			} else {
				this.$emit('addCart', {
					...this.proinfo,
					index: this.index
				});
			}
		},
		inputCar(num) {
			this.$postAction(
				this.$api.inputCar + this.proinfo.id,
				{
					num
				},
				{
					custom: {
						ShowLoading: false
					}
				}
			).then(da => {
				if (da.code == 0) {
					let info = { ...this.proinfo };
					info.cart_num = num;
					this.$emit('changeNum', info);
					this.getCarCount();
				}
			});
		}
	},
	options: {
		styleIsolation: 'shared'
	}
};
</script>

<style scoped lang="scss">
.pro-item {
	border-radius: 10upx;
	overflow: hidden;
	background: #fff;
	margin-left: auto;
	margin-right: auto;
	// padding-bottom: 24upx;
	.tjtag {
		line-height: 34upx;
		background: #fff2f4;
		border: 1px solid #fff2f4;
		color: #df425d;
		border-radius: 4px;
		display: inline-block;
		padding: 0 6upx;
		font-size: 20upx;
		font-weight: normal;
		margin-right: 10upx;
	}

	.tjtagimg {
		width: 100upx;
		height: 48upx;
	}
}
.imgbox {
	border-radius: 10upx;
	overflow: hidden;
	position: relative;
	transform: translateY(0);
	image {
		display: block;
		width: 100%;
		height: 100%;
	}
	.video {
		width: 32upx;
		height: 32upx;
		position: absolute;
		right: 5upx;
		bottom: 5upx;
	}
	.mark {
		background: rgba(0, 0, 0, 0.6);
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;
		color: #fff;
		font-size: 24upx;
	}
	.viodetip {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		background: #009944;
		font-size: 24upx;
		color: #fff;
		padding: 8upx;
		white-space: nowrap;
		image {
			width: 28upx;
			height: 28upx;
			margin-right: 10upx;
		}
	}
}
.pro-item-bd {
	padding: 14upx 16upx 20upx;
	position: relative;
	&.nopadding {
		padding: 0;
	}
	.name {
		font-size: 32upx;
		color: rgba(0, 0, 0, 0.9);
		line-height: 48upx;
		font-weight: 500;
		.limittag {
			display: inline-block;
			padding: 4upx 6upx;
			color: var(--nav-bg);
			border-radius: 4upx;
			border: 1px solid var(--nav-bg);
			font-size: 18upx;
			line-height: 1;
			margin-right: 5upx;
			vertical-align: middle;
		}
	}
	.guige {
		color: #757575;
		font-size: 24upx;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.subname {
		color: #bfbfbf;
		font-size: 24upx;
		line-height: 30upx;
	}
	.tags {
		margin: 0 -5upx;
		height: 32upx;
		// overflow: hidden;
		.tag {
			margin: 5upx;
		}
		image.tag {
			height: 32upx;
		}
	}
	.price {
		color: var(--nav-bg);
		font-size: 34upx;
		font-weight: 500;
		line-height: 0.7;
		vertical-align: bottom;

		.symbols {
			font-size: 22upx;
		}
	}
	.unit {
		font-size: 24upx;
		font-weight: 400;
	}
	.vip {
		width: 77upx;
		height: 30upx;
	}
	.oldprice {
		font-size: 28upx;
		font-weight: 500;
		color: #2c3664;
		line-height: 1;
	}
	::v-deep .cart {
		width: 52upx;
		height: 52upx;
		border-radius: 50%;
		right: 0;
		position: relative;
		image {
			display: block;
			width: 100%;
			height: 100%;
		}
		.u-badge {
			position: absolute;
			right: -10upx;
			transform: translate(0, -70%);
			top: 0;
			z-index: 999;
			border: 2upx solid #ffffff;
		}
	}
	.fixed-right {
		position: absolute;
		right: 0;
		bottom: 0;
	}
	.goodstate {
		background: linear-gradient(180deg, #f86928 0%, #f58236 100%);
		color: #fff;
		font-size: 18upx;
		line-height: 30upx;
		text-align: center;
		display: inline-block;
		margin-right: 6upx;
		border-radius: 4upx;
		padding: 0 4upx;
	}
}
.pro-item-ft {
	// height: 30upx;

	& > view {
		line-height: 30upx;
	}
}
// large，normal，small，mini
.pro-item.small {
	.pro-item-bd {
		.name {
			font-size: 26upx;
			line-height: 40upx;
		}
		.subname {
			font-size: 20upx;
			line-height: 28upx;
		}

		.price {
			font-size: 28upx;
			line-height: 36upx;
		}
		.unit {
			font-size: 12upx;
		}
		.vip {
			width: 58upx;
			height: 18upx;
			font-size: 12upx;
			line-height: 18upx;
			margin-left: 7upx;
		}
		.oldprice {
			font-size: 16upx;
		}
	}
}
.pro-item.mini {
	.pro-item-bd {
		.name {
			font-size: 24upx;
			line-height: 36upx;
		}
		.subname {
			font-size: 18upx;
			line-height: 22upx;
		}

		.price {
			font-size: 24upx;
			line-height: 36upx;
			.unit {
				font-size: 16upx;
			}
		}
		.vip {
			width: 77upx;
			height: 30upx;
		}
		.oldprice {
			font-size: 14upx;
			.unit {
				font-size: 8upx;
			}
		}
		.cart {
			width: 36upx;
			height: 36upx;
			image {
				width: 22upx;
				height: 22upx;
			}
		}
	}
}
</style>
